<template>
  <van-nav-bar
    :title="OPERTYPE == 'OUTBOUND' ? t('home.出货扫描') : OPERTYPE == 'OUTBOUND_RETURN' ? t('home.退件签出') : t('home.到仓扫描')"
    left-arrow
    @click-left="onClickLeft"
  />
  <div class="p-2 mx-auto">
    <van-cell-group>
      <!-- <van-field v-model="scan" label="" :placeholder="t('inScan.请扫描大包号')" /> -->
      <van-field
        v-model="scan"
        label=""
        :placeholder="t('inScan.请扫描大包号')"
        @keydown.enter="handleScan"
      />

      <van-field class="font-bold" label-width="50vw" :label="t('inScan.大包号')">
        <template #input>
          <span>{{ t("inScan.操作记录") }}
            <van-tag  
              >{{ dataList.length }}</van-tag>
              <van-tag  type="success"
              >{{ dataList.filter(i=>i.status).length }}</van-tag>
              <van-tag  type="danger"
              >{{ dataList.filter(i=>!i.status).length }}</van-tag>
          </span>
        </template>
      </van-field>

      <template v-if="dataList.length > 0">
        <template v-for="item in dataList" :key="item.id">
          <!-- <van-field label-width="50vw" :label-class=" item.status
            ? 'text-green-500'
            : 'text-red-800'" :label="item.packageNo" value="asxasdasd"  >
          <template #input  >
            <span :class=" item.status
            ? 'text-green-500'
            : 'text-red-500'">{{ item.info }}</span>
          </template>
        </van-field> -->

          <van-cell
            :title="item.packageNo"
            :value="item.info"
            :title-class="item.status ? 'text-green-500' : 'text-red-500'"
            value-class="text-left"
          >
            <span :class="item.status ? 'text-green-500' : 'text-red-500'">{{
              item.info
            }}</span>
          </van-cell>
        </template>
      </template>
      <van-empty v-else :description="t('noData')" :image="img_index_path"/>
    </van-cell-group>
  </div>
</template>

<script setup lang="ts">
// import router from "@/router";
// import { useStore } from "@/stores";
// import { localStorage } from "@/utils/local-storage";
// import Vue from 'vue';
// Vue.use(Toast);
// , postRequest, getRequest

import img_index_path from '~/noData.png'; 
import { postRequest } from "@/api";
import { useI18n } from "vue-i18n";
// import { showNotify, showFailToast } from "vant";
import { AppToast } from "@/utils/appToast";
const { t } = useI18n();

// const store = useStore();
const onClickLeft = () => history.back();
const scan = ref("");
const OPERTYPE = ref("");
const dataList = ref([
]);

function getPathParamsByName(name) {
  const reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
  const r = window.location.search.substr(1).match(reg);
  if (r != null) return unescape(r[2]);
  return null;
}
const init = async () => {
  // 获取路径参数
  OPERTYPE.value = getPathParamsByName("operType");
};
init();
const handleScan = () => {
  if (scan.value) {
    //迁出
    if (OPERTYPE.value == "OUTBOUND") {
      postRequest("/outScan", {
        packageNo: scan.value,
      }).then((res) => {
        console.log(res);
        if (res.status == 200) {
          dataList.value.unshift({
            id: dataList.value.length + 1,
            packageNo: scan.value,
            status: 1,
            info: t("inScan.出货成功"),
          });
          scan.value = "";
        AppToast(t("success"));
        } else {
          dataList.value.unshift({
            id: dataList.value.length + 1,
            packageNo: scan.value,
            status: 0,
            info: t("inScan.出货失败")+' '+res.message,
          });
          scan.value = "";
          AppToast(t("fail")+' '+res.message, "fail",true);
        }
      });
    } 
    //退件签出
    else  if (OPERTYPE.value == "OUTBOUND_RETURN") {
      postRequest("/return", {
        packageNo: scan.value,
      }).then((res) => {
        console.log(res);
        if (res.status == 200) {
          dataList.value.unshift({
            id: dataList.value.length + 1,
            packageNo: scan.value,
            status: 1,
            info: t("inScan.出货成功"),
          });
          scan.value = "";
        AppToast(t("success"));
        } else {
          dataList.value.unshift({
            id: dataList.value.length + 1,
            packageNo: scan.value,
            status: 0,
            info: t("inScan.出货失败")+' '+res.message,
          });
          scan.value = "";
          AppToast(t("fail")+' '+res.message, "fail",true);
        }
      });
    } 
    //签入
    else {
      postRequest("/inScan", {
        packageNo: scan.value,
      }).then((res) => {
        if (res.status === 200) {
          dataList.value.unshift({
            id: dataList.value.length + 1,
            packageNo: scan.value,
            status: 1,
            info: t("success"),
          });
          scan.value = "";
        AppToast(t("success"));
        } else {
          dataList.value.unshift({
            id: dataList.value.length + 1,
            packageNo: scan.value,
            status: 0,
            info: t("fail")+' '+res.message,
          });
          scan.value = ""; 
          AppToast(t("fail")+' '+res.message, "fail",true);
        }
      });
    }
  } else {
    AppToast(t("inScan.请扫描大包号"), "danger", true);
  }
};
</script>

<style lang="less" scoped></style>
